<template>
	<div class="container">
		<el-page-header @back="goBack" content="回收经历"></el-page-header>
		<div class="e-m-t-45">
			<el-form :inline="true" class="demo-form-inline">
                <el-form-item label="小哥名称">
                    <el-input placeholder="请输入" prefix-icon="el-icon-search"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input placeholder="请输入" prefix-icon="el-icon-search"></el-input>
                </el-form-item>
                <el-form-item label="配送时间" prop="">
                    <el-date-picker
                        type="datetimerange"
                        format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList">查询</el-button>
                </el-form-item>
			</el-form>
		</div>
		
		<el-divider></el-divider>

		<el-table :data="tableData" style="width: 100%">
            <el-table-column
                fixed
                type="index"
                label="订单ID"
                width="100">
            </el-table-column>
			<el-table-column prop="type" label="回收废品类型">
            </el-table-column>
            <el-table-column prop="time" label="订单时间" width="180">
            </el-table-column>
            <el-table-column prop="dispatcher" label="小哥" width="180">
            </el-table-column>
            <el-table-column prop="state" label="订单状态" width="180">
                <template slot-scope="scope">
                    <span class="color-success">{{scope.row.state}}</span>
                    <!-- <span class="color-warning">{{scope.row.state}}</span>
                    <span class="color-danger">{{scope.row.state}}</span>
                    <span>{{scope.row.state}}</span> -->
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="goView">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		layout: 'admin',
		head() {
			return {
				title: '回收经历' 
			}
		},
		data() {
			return {
				loading:true,
				key: '',
				page: 1,
				pageSize: 10,
				total: 0,
				tableData: []
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			goBack() {
				this.$router.go(-1)
			},
			getList() {
				this.tableData = []
				this.loading = true
				setTimeout(()=>{
					this.loading = false
					this.tableData = [
                        {
                            time: '2022-10-07 16:36',
                            type: '纸皮',
                            tel: '13800138001',
                            dispatcher: '小蓝',
                            state: '已完成'
                        },
                        {
                            time: '2022-10-07 16:36',
                            type: '电子废品',
                            tel: '13800138001',
                            dispatcher: '小蓝',
                            state: '已完成'
                        },
                        {
                            time: '2022-10-07 16:36',
                            type: '旧家具',
                            tel: '13800138001',
                            dispatcher: '小蓝',
                            state: '已完成'
                        },
                        {
                            time: '2022-10-07 16:36',
                            type: '电视机',
                            tel: '13800138001',
                            dispatcher: '小蓝',
                            state: '已完成'
                        }
                    ]
				},1000)
				// this.$axios.post('/newsDetail/list', {
				// 	"PageIndex": this.page,
				// 	"PageSize": this.pageSize,
				// 	"Key": this.key
				// }).then((res) => {
				// 	this.tableData = res.rows;
				// 	this.total = res.total;
				// })
			},
			goView(id) {
				this.$router.push({
					path: 'experienceView?id=' + id
				})
			},
			pageChange(e) { // 页码切换事件
				this.page = e;
				this.getList()
			},
			handleSizeChange(val) {
				this.page = 1;
				this.pageSize = val;
				this.getList()
			},
			del(id) {
				return new Promise((resolve, reject)=>{
					this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$axios.post('/newsDetail/delete?Ids=' + id).then((res) => {
							this.$message.success(res.msg);
							this.getList()
							resolve()
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar {
		padding: 20px 0 0;
	}

	.send {
		margin-top: 15px;
		margin-right: 10px;
	}

	.dialogForm {
		display: flex;
		flex-wrap: wrap;

		.el-form-item {
			width: 50%;
			float: left;

			&.all {
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}

    .user-face{
        display: flex;
        align-items: center;
        position: relative;
        .male,.female{
            font-size: 14px;
            position: absolute;
            left: 30px;
            top: 0;
            background-color: #fff;
            height: 16px;
            width: 16px;
            line-height: 16px;
            border-radius: 6px;
        }
        .male{
            color: var(--blue);
        }
        .female{
            color: var(--pink);
        }
    }
</style>
